<template>
    <div class="DoorCords">
        <Addtitle>访客开门记录</Addtitle>
        <div class="datatable">
            <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%">
                <el-table-column
                prop="name"
                label="访客姓名"
                width="273">
                </el-table-column>
                <el-table-column
                prop="phone"
                label="手机号"
                width="272">
                </el-table-column>
                <el-table-column
                prop="openposion"
                label="开门位置"
                width="272">
                </el-table-column>
                <el-table-column
                prop="opentime"
                label="开门时间"
                width="271">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Addtitle from '../components/Addtitle.vue'
export default {
    components:{
        Addtitle
    },
    data(){
        return{
            tableData: [
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                },
                {
                    name:'李兴明',
                    phone:'13013001300',
                    openposion:'西入口闸机',
                    opentime:'2021-06-23 22:31'
                }
            ],//数据表格数据
        }
    }
}
</script>

<style lang="scss" scoped>
    .DoorCords{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 数据表格
        .datatable{
            
            width: 1089px;
            margin: auto;
            margin-top: 20px;
            text-align: center;
            ::v-deep .has-gutter th{
                height: 45px !important;
                background-color: #f5f5f5;
                box-sizing: border-box;
                padding: 0 !important;
                font-size: 14px;
                color: #666666;
                text-align: center;
                font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
            }
            ::v-deep .el-table__row td{
                height: 50px !important;
                padding: 0 !important;
            }
            ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                background-color: #f9f9f9;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(1){
                text-align: center !important;
                color: #999 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(2){
                color: #666 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(4){
                color: #999 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                text-align: center;
                color: #0079fe;
                // cursor: pointer;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                cursor: pointer;
                text-decoration: underline !important;
                // color: #4a4a4a;
            }
            ::v-deep .el-table__row .el-table__cell{
                color: #666666;
                font-size: 12px;
            }
            ::v-deep .el-table__row:hover{
                background-color: inherit !important;
            }
        }
    }
</style>